<template>
	<view class="page">
		<view class="header">
			<view class="header-left" @tap="goBack">
				<uni-icons type="arrowleft" size="24" color="#333"></uni-icons>
			</view>
			<view class="header-title">数据统计</view>
			<view class="header-right"></view>
		</view>

		<view class="content">
			<!-- 统计概览 -->
			<view class="overview-section">
				<view class="overview-card">
					<view class="overview-item">
						<text class="overview-label">班级人数</text>
						<text class="overview-value">45</text>
					</view>
					<view class="overview-item">
						<text class="overview-label">平均到课率</text>
						<text class="overview-value">92%</text>
					</view>
					<view class="overview-item">
						<text class="overview-label">作业完成率</text>
						<text class="overview-value">87%</text>
					</view>
				</view>
			</view>

			<!-- 到课率统计 -->
			<view class="chart-section">
				<view class="section-title">到课率统计</view>
				<view class="chart-container">
					<view class="chart-bar" v-for="(item, index) in attendanceData" :key="index">
						<view class="chart-label">{{ item.date }}</view>
						<view class="chart-bar-container">
							<view class="chart-bar-inner" :style="{ height: item.rate + '%' }"></view>
						</view>
						<view class="chart-value">{{ item.rate }}%</view>
					</view>
				</view>
			</view>

			<!-- 作业完成率统计 -->
			<view class="chart-section">
				<view class="section-title">作业完成率统计</view>
				<view class="chart-container">
					<view class="chart-bar" v-for="(item, index) in homeworkData" :key="index">
						<view class="chart-label">{{ item.date }}</view>
						<view class="chart-bar-container">
							<view class="chart-bar-inner" :style="{ height: item.rate + '%' }" style="background-color: #4CAF50;"></view>
						</view>
						<view class="chart-value">{{ item.rate }}%</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import { ref } from 'vue';

	// 模拟到课率数据
	const attendanceData = ref([
		{ date: '周一', rate: 95 },
		{ date: '周二', rate: 87 },
		{ date: '周三', rate: 92 },
		{ date: '周四', rate: 90 },
		{ date: '周五', rate: 98 }
	]);

	// 模拟作业完成率数据
	const homeworkData = ref([
		{ date: '第1周', rate: 85 },
		{ date: '第2周', rate: 90 },
		{ date: '第3周', rate: 88 },
		{ date: '第4周', rate: 92 },
		{ date: '第5周', rate: 87 }
	]);

	const goBack = () => {
		uni.navigateBack();
	};
</script>

<style>
	.page {
		min-height: 100vh;
		background-color: #f5f5f5;
	}

	.header {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 20rpx 30rpx;
		background-color: #fff;
		box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.1);
		position: sticky;
		top: 0;
		z-index: 999;
	}

	.header-left,
	.header-right {
		width: 40rpx;
		height: 40rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.header-title {
		font-size: 32rpx;
		font-weight: bold;
		color: #333;
	}

	.content {
		padding: 20rpx 30rpx;
	}

	.overview-section {
		margin-bottom: 30rpx;
	}

	.overview-card {
		background-color: #fff;
		border-radius: 16rpx;
		padding: 30rpx;
		display: flex;
		justify-content: space-around;
	}

	.overview-item {
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.overview-label {
		font-size: 26rpx;
		color: #666;
		margin-bottom: 10rpx;
	}

	.overview-value {
		font-size: 36rpx;
		font-weight: bold;
		color: #1976D2;
	}

	.chart-section {
		background-color: #fff;
		border-radius: 16rpx;
		padding: 30rpx;
		margin-bottom: 30rpx;
	}

	.section-title {
		font-size: 30rpx;
		font-weight: bold;
		color: #333;
		margin-bottom: 30rpx;
	}

	.chart-container {
		display: flex;
		justify-content: space-around;
		align-items: flex-end;
		height: 300rpx;
		padding: 20rpx 0;
		border-bottom: 1rpx solid #eee;
	}

	.chart-bar {
		display: flex;
		flex-direction: column;
		align-items: center;
		flex: 1;
	}

	.chart-label {
		font-size: 24rpx;
		color: #666;
		margin-bottom: 10rpx;
	}

	.chart-bar-container {
		width: 60rpx;
		height: 200rpx;
		background-color: #f5f5f5;
		border-radius: 8rpx;
		display: flex;
		align-items: flex-end;
		justify-content: center;
		margin-bottom: 10rpx;
	}

	.chart-bar-inner {
		width: 40rpx;
		background-color: #1976D2;
		border-radius: 4rpx;
		transition: height 0.3s ease;
	}

	.chart-value {
		font-size: 24rpx;
		color: #333;
		font-weight: 500;
	}
</style>